<template>
  <div style="height: 100%; " class="workspace">
    <div ref="listWarp" style="height: 100%;background-color:#fff;padding: 0px;">
      <div class="head">
        <i class="itag"></i>
        <span class="itext">报修详情</span>
        <el-button
          type="danger"
          icon="el-icon-edit-outline"
          size="small"
          round
          style="float: right;"
          @click="pingjia()"
          v-if="flag && repairObj.status==4"
        >去评价</el-button>
      </div>
      <div style="padding:10px 0;border-bottom: 1px dashed #F1F1F1;">
        <div>
          <p style="margin-top: 0;cursor: pointer;">
            <el-tag v-if="repairObj.status==0" size="small" disable-transitions type="warning">待审核</el-tag>
            <el-tag v-if="repairObj.status==1" size="small" disable-transitions type="warning">待受理</el-tag>
            <el-tag v-if="repairObj.status==2" size="small" disable-transitions type="warning">待受理</el-tag>
            <el-tag v-if="repairObj.status==3" size="small" disable-transitions type="info">待完工</el-tag>
            <el-tag
              v-if="repairObj.status==4 && repairObj.ifVisit==0"
              size="small"
              disable-transitions
              type="info"
            >待评价</el-tag>
            <el-tag
              v-if="repairObj.status==4 && repairObj.ifVisit==1"
              size="small"
              disable-transitions
              type="success"
            >已回访</el-tag>
            <el-tag v-if="repairObj.status==5" size="small" disable-transitions type="warning">已驳回</el-tag>
            <span
              style="font-size:16px;
                font-family:Microsoft YaHei;
                font-weight:bold;
                color:rgba(51,51,51,1);margin-left:15px"
            >{{repairObj.projectName}}</span>
          </p>
        </div>
        <div
          style="font-size:16px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(101,101,101,1);cursor: pointer;"
        >{{repairObj.content}}</div>
        <div>
          <img
            style="width: 100px;height: 100px;object-fit: contain;margin-right:15px;cursor: pointer;border: 1px solid rgb(241, 241, 241);border-radius: 4px"
            @click.prevent="privew(item)"
            v-for="(item,index) in repairObj.resourcesVOS"
            :src="$itsoftUI.config.fileImgUrl+item.fileUrl"
            :key="index"
            alt
            srcset
          />
        </div>
      </div>
      <el-row :gutter="10" style="margin:10px 0">
        <el-col :span="4">
          <span class="ctext">
            <img src="../../../assets/img/bxr.png" alt srcset />
            报修人:
            <span class="ctext1">{{repairObj.repairUserName}}</span>
          </span>
        </el-col>
        <el-col :span="5">
          <span class="ctext">
            <img src="../../../assets/img/lxdh.png" alt srcset />
            联系电话:
            <span class="ctext1">{{repairObj.repairUserMobile}}</span>
          </span>
        </el-col>
        <el-col :span="5">
          <span class="ctext">
            <img src="../../../assets/img/yysj.png" alt srcset />
            预约时间:
            <span
              class="ctext1"
            >{{repairObj.bookTimeString}} {{repairObj.startRange}}-{{repairObj.endRange}}</span>
          </span>
        </el-col>
        <el-col :span="8">
          <span class="ctext">
            <img src="../../../assets/img/tjsj.png" alt srcset />
            提交时间:
            <span class="ctext1">{{repairObj.createTime}}</span>
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin:10px 0">
        <el-col :span="4">
          <span class="ctext">
            <img src="../../../assets/img/wrwx.png" alt srcset />
            无人维修:
            <span class="ctext1" v-if="repairObj.ifOnduty==1">同意</span>
            <span class="ctext1" v-if="repairObj.ifOnduty==0">不同意</span>
          </span>
        </el-col>
        <el-col :span="5">
          <span class="ctext">
            <img src="../../../assets/img/bxdw.png" alt srcset />
            报修单位:
            <span class="ctext1">{{repairObj.acceptDeptName}}</span>
          </span>
        </el-col>
        <el-col :span="5">
          <span class="ctext">
            <img src="../../../assets/img/dh.png" alt srcset />
            单号:
            <span class="ctext1">{{repairObj.serialNumber}}</span>
          </span>
        </el-col>
        <el-col :span="8">
          <span class="ctext">
            <img src="../../../assets/img/qydz.png" alt srcset />
            区域地址:
            <span class="ctext1">{{repairObj.areaName}}/{{repairObj.address}}</span>
          </span>
        </el-col>
      </el-row>
      <div class="head" v-if="flag" style="margin-top:20px">
        <i class="itag"></i>
        <span class="itext">工单日志</span>
      </div>
      <div class="head" v-else style="margin-top:20px">
        <i class="itag"></i>
        <span class="itext">评价信息</span>
      </div>
      <div class="box" v-if="flag" style="margin:10px 0">
        <el-timeline>
          <el-timeline-item
            v-for="(item,index) in repairObj.logVOS"
            :key="index"
            placement="top"
            :color="item.color"
          >
            <!-- :timestamp="item.createTime" -->
            <div>
              <!-- <el-tag type="success" size="small">{{item.statusName}}</el-tag> -->
              <span
                :style="{color:(item.color=='#f34c15'?'#f34c15':'#666')}"
                class="text"
              >{{item.statusName}}</span>
              <!-- <el-tag
                      type="danger"
                      v-if="item.statusName=='删除' || item.statusName=='屏蔽' || item.statusName=='禁言' || item.statusName=='审核驳回' || item.statusName=='不公开'"
              >{{item.statusName}}</el-tag>-->
              <div :style="{color:(item.color=='#f34c15'?'#333':'#666')}">
                {{item.content}}
                <el-popover
                  placement="top-start"
                  title
                  width="250"
                  trigger="hover"
                  :content="item.changeDetail"
                >
                  <div slot="reference" v-if="item.changeDetail!=''" style="display: inline-block;">
                    <svg-icon
                      slot="prefix"
                      icon-class="query"
                      style="font-size:16px;color: green; "
                    />
                  </div>
                </el-popover>
              </div>
              <div style="color:#999">{{item.createTime}}</div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>

      <div class="bot" v-else>
        <el-form ref="form" label-width="80px">
          <el-form-item :label="item.name" v-for="(item,index) in projectList" :key="index">
            <el-rate style="margin-top: 10px;" v-model="item.star">{{item.star}}</el-rate>
          </el-form-item>
          <el-form-item label="评价内容" prop="content" v-if="!flag">
            <el-input
              type="textarea"
              :rows="5"
              v-model="content"
              placeholder="请输入评价内容"
              maxlength="20"
              style="width:700px;"
            ></el-input>
          </el-form-item>
          <el-button
            style="margin-left:350px;margin-top:15px"
            type="danger"
            :loading="auditLoading"
            size="small"
            @click="editStatus('visitForm')"
          >发表点评</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { myRepairApi } from "@/api/repair/myRepair";
import { projectApi } from "@/api/repair/evaluationSet";
import { visitCommentApi } from "@/api/repair/visitComment";
export default {
  data() {
    return {
      repairObj: {},
      flag: true,
      projectList: [],
      content: "",
      auditLoading: false,
    };
  },
  methods: {
    shatDown() {
      this.$emit("shatDown");
    },
    privew(item) {
      window.open(this.$itsoftUI.config.fileImgUrl + item.fileUrl, "_blank");
    },
    pingjia() {
      this.flag = false;
    },
    //评价项目
    funGetProject() {
      projectApi.GetProject().then((res) => {
        this.projectList = res.data;
      });
    },
    //评价提交
    editStatus(audit) {
      let obj = {
        common: this.projectList,
        content: this.content,
        repairId: this.repairObj.finishedInfo.repairId,
      };
      this.auditLoading = true;
      visitCommentApi
        .visitSave(JSON.stringify(obj))
        .then((res) => {
          if (res.status == "success") {
            this.$message.success("评价成功");
            // this.$router.push("/applicationCenter");
            this.shatDown();
            this.auditLoading = false;
          }
        })
        .catch(() => {
          this.auditLoading = false;
        });
    },
  },
  mounted() {},
  created() {
    this.funGetProject();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-tag.el-tag--warning {
  background-color: #ffedec;
  color: #ff5242;
}
::v-deep .el-tag.el-tag--info {
  background-color: #fff4eb;
  color: #ff9539;
}
::v-deep .el-tag.el-tag--success {
  background-color: #e6f9f5;
  color: #0bc99d;
}
::v-deep .el-tag {
  border-width: 0;
}
</style>


<style lang="scss" scoped>
.itag {
  display: inline-block;
  width: 3px;
  height: 12px;
  background: rgba(243, 75, 21, 1);
  border-radius: 1px;
}
.itext {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 30px;
  margin-left: 5px;
}
.head {
  width: 100%;
  height: 35px;
  /* line-height: 35px; */
  border-bottom: 1px solid #f1f1f1;
}
.ctext {
  color: #656565;
  font-size: 14px;
  display: flex;
  align-items: center;
  img {
    margin: 0 10px;
  }
}
.ctext1 {
  color: #333;
  font-size: 14px;
  margin: 0 10px;
}
.box {
  ::v-deep .el-timeline-item__timestamp.is-top {
    margin-bottom: -3px !important;
  }
  ::v-deep .el-timeline-item__node--normal {
    left: 0px !important;
    top: 5px !important;
    width: 9px !important;
    height: 9px !important;
  }
  ::v-deep .el-timeline-item__tail {
    border-left: 1px solid #e4e7ed !important;
    top: 5px;
  }
  // /deeo/ .el-timeline-item__node--normal {
  //   background-color: #00b38b !important;
  // }
  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    border: none !important;
    box-shadow: none !important;
    background: #00b38b;
    &:hover {
      color: #fff !important;
    }
  }
  ::v-deep .el-radio-button--small .el-radio-button__inner {
    margin: 0 10px !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 5px !important;
  }
  ::v-deep .el-radio-button__inner {
    &:hover {
      color: #00b38b !important;
    }
  }
  ::v-deep .show .el-upload--picture-card {
    display: none !important;
  }
  ::v-deep .show1 .el-upload--picture-card {
    display: none !important;
  }
  ::v-deep .el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 90px;
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item {
    width: 80px;
    height: 80px;
    line-height: 90px;
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item-status-label i {
    position: absolute;
    top: 0px;
    left: 14px;
  }
}
</style>
